<script>
import {read,utils} from "xlsx";

export default {
  name: "excelRead",
  data() {
    return {
      fileList: [],
      //记录数据列表
      tableData:[
        {

        }
      ]
    };
  },
  methods: {
    beforeUpload(file) {
      // 在文件上传之前进行的操作，例如检查文件大小、类型等
      // 如果返回 false 则停止上传
      // 如果返回 true 或者 Promise 则继续上传
      // 可以在这里打印 file 来查看选择的文件信息
      console.log(file);
      return true;
    },
    handleChange(file, fileList) {
      // 当文件状态改变时的钩子，例如添加文件、移除文件
      // 这里可以打印 file 和 fileList 来查看变化
      this.fileList = fileList;
      file.raw.arrayBuffer().then((result)=>{

        const wb =read(result)
        console.log(wb)
        const sheet1 =wb.Sheets[wb.SheetNames[0]]
        console.log(sheet1)
        const _data=utils.sheet_to_json(sheet1)
        console.log(_data)
      })
    },
    handleSuccess(response, file, fileList) {
      // 文件上传成功时的钩子
      // response 是接口返回的数据
      console.log(response, file, fileList);
    },
  }
}
</script>
<template>
<div>
  <div>
    <el-upload
        class="upload-demo"
        action="/your/upload/url"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :auto-upload="false"
    :on-change="handleChange"
    :file-list="fileList">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    </el-upload>
  </div>
  <div>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="date"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
    </el-table>
  </div>
</div>
</template>

<style scoped>

</style>